import { useIntersectionObserver } from '@vueuse/core';

// 定义懒加载指令
export const lazyPlugin = {
    install(app) {
        // 懒加载指令管理
        // 定义全局指令（图片懒加载）
        app.directive('img-lazy', {
            mounted(el, binding) {
                // el：指令绑定的元素
                // binding: binding.value 等于指令后面绑定的表达式值
                // vueuse函数，用来判断元素el是否进入视口区域        
                const {stop} = useIntersectionObserver(
                    el,
                    ([{ isIntersecting }]) => {
                        console.log(isIntersecting);

                        if (isIntersecting) {
                            // 进入视口区域
                            el.src = binding.value;
                            stop();
                        }
                    },
                )
            }
        });
    }
};